import React, {Component} from 'react'

import {renderRoutes} from 'react-router-config'

import { Layout, Breadcrumb, Icon } from 'antd'
// import MenuList from '$layout/menuList/menuList'
const { Header, Content, Footer, Sider } = Layout

import './app.less'

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            collapsed: false
        }
    }

    toggle() {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }

    render() {
        return (
            <Layout>
                <Sider
                trigger={null}
                collapsible
                collapsed={this.state.collapsed}
                >
                    <div className="logo" />
                    {/* <MenuList pathname={this.props.location.pathname} /> */}
                </Sider>
                <Layout>
                    <Header className="header">
                        <Icon
                        className="trigger"
                        type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                        onClick={() => this.toggle()}
                        />
                    </Header>
                    <Content className='content-wrap'>
                        {renderRoutes(this.props.route.routes)}
                    </Content>
                    <Footer className='footer'>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default App